<template>
  <div>
    <div class="menubar">
      <div
        v-for="(val, index) in (menuLists as any[])"
        :key="index"
        @mouseenter="mouseenterMenu(index)"
        @mouseleave="mouseleaveMenu()"
        :class="activeIndex == index ? 'active' : ''"
      >
        <!-- <span><SvgIcon :name="val.meta.icon" class="icon" />{{ val.meta.title }}</span> -->
        <span>{{ val.meta.title }}</span>
      </div>
    </div>
    <el-collapse-transition>
      <div class="menutext" v-show="showChildren">
        <div
          v-for="(item, i) in (menuLists as any[])"
          :key="i"
          :class="activeIndex == i ? 'active' : ''"
          @mouseenter="mouseenterMenu(i)"
          @mouseleave="mouseleaveMenu()"
        >
          <template v-if="item.children">
            <div
              v-for="(res, indexC) in item.children"
              :key="indexC"
              class="text"
              @click="goPath(res)"
            >
              {{ res.meta.title }}
            </div>
          </template>
        </div>
      </div>
    </el-collapse-transition>
  </div>
</template>

<script lang="ts" setup>
import { reactive, toRefs, ref } from "vue";
import { useRoute } from "vue-router";

const route = useRoute();

const state = reactive({
  showChildren: false,
  activeIndex: 99,
});
let { showChildren, activeIndex } = toRefs(state);
const mouseenterMenu = (index: number) => {
  if (state.activeIndex == index) {
    state.showChildren = !state.showChildren;
    return;
  }
  state.activeIndex = index;
  state.showChildren = true;
};
const mouseleaveMenu = () => {
  state.activeIndex = 99;
  state.showChildren = false;
};
const goPath = (res: any) => {
  //   router.push(res.path);
  state.showChildren = false;
  state.activeIndex = 99;
};
const menuLists = ref([
  {
    component: () => {
      return "../layout/routerView/parent.vue";
    },
    meta: {
      title: "应用管理",
      isLink: false,
      isHide: false,
      isKeepAlive: true,
      isAffix: false,
    },
    name: "application",
    path: "/application",
    children: [
      {
        component: () => "/src/views/application/manage/index.vue",
        meta: {
          title: "应用菜单一",
          isLink: false,
          isHide: false,
          isKeepAlive: true,
          isAffix: false,
        },
        name: "manage",
        path: "/application/manage",
      },
      {
        component: () => "/src/views/application/manage/index.vue",
        meta: {
          title: "应用菜单二",
          isLink: false,
          isHide: false,
          isKeepAlive: true,
          isAffix: false,
        },
        name: "manage",
        path: "/application/manage",
      },
    ],
  },
  {
    component: () => {
      return "../layout/routerView/parent.vue";
    },
    meta: {
      title: "系统管理",
      isLink: false,
      isHide: false,
      isKeepAlive: true,
      isAffix: false,
    },
    name: "system",
    path: "/system",
    children: [
      {
        component: () => "/src/views/application/manage/index.vue",
        meta: {
          title: "系统管理",
          isLink: false,
          isHide: false,
          isKeepAlive: true,
          isAffix: false,
        },
        name: "system",
        path: "/system/manage",
      },
    ],
  },
]);
</script>
<style lang="scss" scoped>
.el-menu-horizontal-warp {
  height: 60px;
  flex: 1;
  overflow: hidden;
  :deep(.el-scrollbar__bar.is-vertical) {
    display: none;
  }
  :deep(a) {
    width: 100%;
  }
  .el-menu.el-menu--horizontal {
    display: flex;
    height: 100%;
    width: 100%;
    box-sizing: border-box;
  }
}

.menubar {
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  background-color: #1c84ee;
  box-shadow: 0 0.2rem 0.5rem rgb(18 38 63 / 30%);
  div {
    cursor: pointer;
    line-height: 60px;
    text-align: center;
    span {
      display: inline-block;
      width: 130px;
    }
  }
}
.menutext {
//   position: absolute;
//   top: 60px;
//   left: 0;
//   right: 0;
  background: rgba(23, 86, 153, 0.8);
  display: flex;
//   padding-left: 230px;
  div {
    width: 130px;
    text-align: center;
    color: #b3d9ff;
    line-height: 20px;
    padding: 8px 0 6px 0;
    font-size: 14px;
  }
}

.menubar {
  span {
    width: 130px;
    font-size: 15px;
    color: #ffffff;
    letter-spacing: 2px;
    text-align: center;
    :hover {
      background: rgba(23, 86, 153, 0.8);
    }
    .icon {
      padding-right: 6px;
      font-size: 15px;
      color: #dfefff;
    }
    :hover {
      background: none;
    }
  }
}
.active {
  background: rgba(30, 98, 170, 0.6);
}
.text {
  cursor: pointer;
}
.text:hover {
  color: #fff;
}
</style>
